import React, { Component,lazy,Suspense  } from 'react'
import {NavLink,Route
  ,Switch} from "react-router-dom";

// 还没展示的时候 就全部加载了
// import A from "./components/A"
// import B from './components/B'

// 用到的时候才加载
const A = lazy(() => import("./components/A"))
const B = lazy(() => import("./components/B"))
export default class LazyComp extends Component {
  render() {
    return (
      <>
         <div>
            <NavLink to="/a">A</NavLink> <br />
            <NavLink to="/b">B</NavLink>
          </div>
          <div>
            <Suspense fallback={<h1>Loading....</h1>} >
              <Switch>
                  <Route path="/a" component={A}/>
                  <Route path="/b" component={B}/>
              </Switch>
            </Suspense>
          </div>
      </>
    )
  }
}
